<template>
  <div>
    <div class="title">
        <div class="left">
            <img class="imgOne" src="@/assets/images/bigViewIMG/blue.png" alt="">
            <img class="imgTwo" src="@/assets/images/bigViewIMG/companyIcon.png" alt="">
            <span>总额情况</span>
        </div>
    </div>
    <div id="totalView" ref="totalView" style=" width:100%;height:210px"></div>
  </div>
</template>

<script>
import echarts from 'echarts'
export default {
    props:{
        oneList:{
            type:Array
        },
       
    },
  
    watch:{
        oneList:{
            handler(val){
                this.setOptions(val);
                this.chart.hideLoading();
            },
            deep:true
        },
        
    },
    mounted() {
       
        this.$nextTick(() => {
            this.initChart();
        });
    },
    methods:{
        initChart() {
            this.chart = echarts.init(document.getElementById('totalView'), null, { renderer: 'svg' })
            this.chart.showLoading({
                text: '',
                color: '#c23531',
                textColor: '#000',
                maskColor: 'rgba(255, 255, 255, 0)',
            })
            // this.setOptions(this.oneList,this.oneList2);
        },
        setOptions(list) {
            // console.log(list1, list2);
            // let DW=''
            //   if(list[0]) {
            //         DW=list[0].sumTotal.slice(-1)
            // }
            const monthList = list.map(item => {
                return item.month
            })
            let newMonthList = Array.from(new Set(monthList))
            // 出口 金额
            const expList = list.filter(item => {
                return item.ieFlag == 'E'

            })
             let eDW=expList[0].sumTotal?expList[0].sumTotal.slice(-1):expList[1].sumTotal.slice(-1)
            const sumList = expList.map(item => {

                if (!item.sumTotal) {
                    return 0
                } else {
                    return +item.sumTotal.slice(0,-1)
                }
            })

            // 进口金额
            const impList = list.filter(item => {
                return item.ieFlag == 'I'

            })
            let iDW=impList[0].sumTotal?impList[0].sumTotal.slice(-1):impList[1].sumTotal.slice(-1)
            const sumList1 = impList.map(item => {
                if (!item.sumTotal) {
                    return 0
                } else {
                    return +item.sumTotal.slice(0,-1)
                }
            })
            this.chart.setOption({
                graphic: {
                    type: 'text',     // 类型：文本
                    left: 'center',
                    top: 'middle',
                    silent: true,     // 不响应事件
                    invisible: list.length>0,   // 有数据就隐藏
                    style: {
                        fill: '#9d9d9d',
                        fontWeight: 'bold',
                        text: '查无数据',
                        fontFamily: 'Microsoft YaHei',
                        fontSize: 25
                    }
                },
                backgroundColor: "",
                tooltip: {
                    trigger: "axis",
                    axisPointer: {
                        type: "shadow",
                    },
                     formatter:function(params){
                       let str=params[0].axisValue+'<br />'
                       params.forEach(item=>{
                        if(item.seriesName=='进口'){
                            str+=`${item.seriesName}: ${item.data}${iDW}<br />`
                        }else {
                            str+=`${item.seriesName}: ${item.data}${eDW}<br />`
                        }
                       })
                        return str
                    }
                },
                legend: {
                    show: list.length > 0,
                    data: ["进口", "出口"],
                    // align: "right",
                    // right: 15,
                    textStyle: {
                        color: "#fff",
                    },
                    itemWidth: 10,
                    itemHeight: 10,
                    itemGap: 20,
                },
                grid: {
                    top: '20%',
                    left: "3%",
                    right: "6%",
                    bottom: "1%",
                    containLabel: true,
                },
                xAxis: [
                    {
                        name: '',
                        nameGap: 1,
                        // nameLocation:'middle',
                        nameTextStyle: {
                            color: '#fff'
                        },
                        type: "category",
                        data: newMonthList,
                        // data: [
                        //     "1月",
                        //     "2月",
                        //     "3月",
                        //     "4月",
                        //     "5月",
                        //     "6月",
                        // ],
                        axisLine: {
                            show: true,
                            lineStyle: {
                                color: "#063374",
                                width: 1,
                                type: "solid",
                            },
                        },
                        axisTick: {
                            show: false,
                        },
                        axisLabel: {
                            show: true,
                            textStyle: {
                                color: "#fff",
                            },
                            rotate: 30,
                            fontSize:10
                        },
                    },
                ],
                yAxis: [
                    {
                        type: "value",
                        name: list.length > 0?'单位：'+iDW+'(进口)':'',
                        axisTick: {
                            show: false,
                        },
                        axisLine: {
                            show: false,
                            lineStyle: {
                                color: "#fff",
                                width: 1,
                                type: "solid",
                            },
                        },
                        splitLine: {
                            lineStyle: {
                                color: "#063374",
                            },
                        },
                    },
                    {
                        type: "value",
                        name: list.length > 0?'单位：'+eDW+'(出口)':'',
                        axisTick: {
                            show: false,
                        },
                        axisLine: {
                            show: false,
                            lineStyle: {
                                color: "#fff",
                                width: 1,
                                type: "solid",
                            },
                        },
                        splitLine: {
                            lineStyle: {
                                color: "#063374",
                            },
                        },
                    },
                ],
                series: [
                    {
                        name: "进口",
                        type: "bar",
                        data: sumList1,
                        barWidth: 10,
                        barGap: 0.5,
                        itemStyle: {
                            normal: {
                                color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
                                    {
                                        offset: 0,
                                        color: "#ff8100",

                                    },
                                    {
                                        offset: 1,
                                        color: "#ff4d00",
                                    },
                                ]),
                                barBorderRadius: [5, 5, 0, 0],
                                opacity: 1,
                            },
                        },
                    },
                    {
                        name: "出口",
                        type: "bar",
                        yAxisIndex:1,
                        data: sumList,
                        barWidth: 10, //柱子宽度
                        barGap: 0.5, //柱子之间间距
                        itemStyle: {
                            normal: {
                                color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
                                    {
                                        offset: 0,
                                        color: "rgba(0,244,255,1)",
                                    },
                                    {
                                        offset: 1,
                                        color: "rgba(0,77,167,1)",
                                    },
                                ]),
                                barBorderRadius: [5, 5, 0, 0],
                                opacity: 1,
                            },
                        },
                    },


                ],
            });
        }
    }
}
</script>

<style lang="scss" scoped>
.title {
    height: 40px;
        display: flex;
    .left {
            width: 500px;
            display: flex;
            align-items: center;
    
            .imgOne {
                width: 35px;
                height: 40px;
            }
    
            .imgTwo {
                width: 22px;
                height: 21px;
                margin-left: 10px;
            }
    
            span {
                color: #fff;
                font-size: 16px;
                margin-left: 8px;
            }
        }
}
</style>